List

Basic list display, which can carry text, lists, pictures, paragraphs.
Importimport{ List }from"antd";

When To Use

A list can be used to display content related to a single subject. The content can consist of multiple elements of varying type and size.

Examples

Header
  • [ITEM] Racing car sprays burning fuel into crowd.
  • [ITEM] Japanese princess to wed commoner.
  • [ITEM] Australian walks 100km after outback crash.
  • [ITEM] Man charged over missing wedding girl.
  • [ITEM] Los Angeles battles huge wildfires.
Header
  • Racing car sprays burning fuel into crowd.
  • Japanese princess to wed commoner.
  • Australian walks 100km after outback crash.
  • Man charged over missing wedding girl.
  • Los Angeles battles huge wildfires.
Header
  • Racing car sprays burning fuel into crowd.
  • Japanese princess to wed commoner.
  • Australian walks 100km after outback crash.
  • Man charged over missing wedding girl.
  • Los Angeles battles huge wildfires.

Ant Design supports a default list size as well as a large and small size.

If a large or small list is desired, set the size property to either large or small respectively. Omit the size property for a list with the default size.

Customizing the header and footer of list by setting header and footer property.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
  • Ant Design Title 1

    Ant Design, a design language for background applications, is refined by Ant UED Team
  • Ant Design Title 2

    Ant Design, a design language for background applications, is refined by Ant UED Team
  • Ant Design Title 3

    Ant Design, a design language for background applications, is refined by Ant UED Team
  • Ant Design Title 4

    Ant Design, a design language for background applications, is refined by Ant UED Team

Basic list.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code

Load more list with loadMore property.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
  • ant design part 0

    Ant Design, a design language for background applications, is refined by Ant UED Team.
    We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure), to help people create their product prototypes beautifully and efficiently.
    • 156
    • 156
    • 2
    logo
  • ant design part 1

    Ant Design, a design language for background applications, is refined by Ant UED Team.
    We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure), to help people create their product prototypes beautifully and efficiently.
    • 156
    • 156
    • 2
    logo
  • ant design part 2

    Ant Design, a design language for background applications, is refined by Ant UED Team.
    We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure), to help people create their product prototypes beautifully and efficiently.
    • 156
    • 156
    • 2
    logo

Set the itemLayout property to vertical to create a vertical list.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Pagination Position:
Pagination Align:
  • Ant Design Title 1

    Ant Design, a design language for background applications, is refined by Ant UED Team
  • Ant Design Title 2

    Ant Design, a design language for background applications, is refined by Ant UED Team
  • Ant Design Title 3

    Ant Design, a design language for background applications, is refined by Ant UED Team
  • Ant Design Title 4

    Ant Design, a design language for background applications, is refined by Ant UED Team

List pagination can be used and set through the pagination property.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Title 1
Card content
Title 2
Card content
Title 3
Card content
Title 4
Card content

Create a grid layout by setting the grid property of List.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Title 1
Card content
Title 2
Card content
Title 3
Card content
Title 4
Card content
Title 5
Card content
Title 6
Card content
title
Card content
title
Card content
title
Card content
title
Card content
title
Card content
title
Card content
title
Card content
title
Card content
title
Card content
title
Card content
title
Card content
title
Card content

Test List grid for some edge cases.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Title 1
Card content
Title 2
Card content
Title 3
Card content
Title 4
Card content
Title 5
Card content
Title 6
Card content

Responsive grid list. The size property the is as same as Layout Grid.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
No data
No data

The example of infinite load with react-infinite-scroll-component.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code

An example of infinite & virtualized list via using rc-virtual-list.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Header
  • [ITEM] Racing car sprays burning fuel into crowd.
  • [ITEM] Japanese princess to wed commoner.
  • [ITEM] Australian walks 100km after outback crash.
  • [ITEM] Man charged over missing wedding girl.
  • [ITEM] Los Angeles battles huge wildfires.
Header
  • Racing car sprays burning fuel into crowd.
  • Japanese princess to wed commoner.
  • Australian walks 100km after outback crash.
  • Man charged over missing wedding girl.
  • Los Angeles battles huge wildfires.
Header
  • Racing car sprays burning fuel into crowd.
  • Japanese princess to wed commoner.
  • Australian walks 100km after outback crash.
  • Man charged over missing wedding girl.
  • Los Angeles battles huge wildfires.
  • Ant Design Title 1

    Ant Design, a design language for background applications, is refined by Ant UED Team
  • Ant Design Title 2

    Ant Design, a design language for background applications, is refined by Ant UED Team
  • Ant Design Title 3

    Ant Design, a design language for background applications, is refined by Ant UED Team
  • Ant Design Title 4

    Ant Design, a design language for background applications, is refined by Ant UED Team
  • Ant Design Title 1

    Ant Design, a design language for background applications, is refined by Ant UED Team
  • Ant Design Title 2

    Ant Design, a design language for background applications, is refined by Ant UED Team
  • Ant Design Title 3

    Ant Design, a design language for background applications, is refined by Ant UED Team
  • Ant Design Title 4

    Ant Design, a design language for background applications, is refined by Ant UED Team
No data
No data

Custom component token.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code

API

Common props ref:Common props

List

PropertyDescriptionTypeDefaultVersion
borderedToggles rendering of the border around the listbooleanfalse
dataSourceDataSource array for listany[]-
footerList footer rendererReactNode-
gridThe grid type of list. You can set grid to something like {gutter: 16, column: 4}object-
headerList header rendererReactNode-
itemLayoutThe layout of listhorizontal | verticalhorizontal
loadingShows a loading indicator while the contents of the list are being fetchedboolean | SpinProps (more)false
loadMoreShows a load more contentReactNode-
localeThe i18n text including empty textobject{emptyText: No Data}
paginationPagination config, hide it by setting it to falseboolean | objectfalse
renderItemCustomize list item when using dataSource(item) => ReactNode-
rowKeyItem's unique value, could be an Item's key which holds a unique value of type React.Key or function that receives Item and returns a React.Keykeyof T | (item: T) => React.Key"key"
sizeSize of listdefault | large | smalldefault
splitToggles rendering of the split under the list itembooleantrue

pagination

Properties for pagination.

PropertyDescriptionTypeDefault
positionThe specify the position of Paginationtop | bottom | bothbottom
alignThe specify the alignment of Paginationstart | center | endend

More about pagination, please check Pagination.

List grid props

PropertyDescriptionTypeDefaultVersion
columnThe column of gridnumber-
gutterThe spacing between gridnumber0
xs<576px column of gridnumber-
sm≥576px column of gridnumber-
md≥768px column of gridnumber-
lg≥992px column of gridnumber-
xl≥1200px column of gridnumber-
xxl≥1600px column of gridnumber-

List.Item

PropertyDescriptionTypeDefaultVersion
actionsThe actions content of list item. If itemLayout is vertical, shows the content on bottom, otherwise shows content on the far rightArray<ReactNode>-
classNamesSemantic structure classNameRecord<actions | extra, string>-5.18.0
extraThe extra content of list item. If itemLayout is vertical, shows the content on right, otherwise shows content on the far rightReactNode-
stylesSemantic DOM styleRecord<actions | extra, CSSProperties>-5.18.0

List.Item.Meta

PropertyDescriptionTypeDefaultVersion
avatarThe avatar of list itemReactNode-
descriptionThe description of list itemReactNode-
titleThe title of list itemReactNode-

Semantic DOM

  • ant design part 0

    Ant Design, a design language for background applications, is refined by Ant UED Team.
    We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure), to help people create their product prototypes beautifully and efficiently.
    • 156
    • 156
    • 2
    logo
  • extra
    5.18.0
    set `extra` of List.Item
  • actions
    5.18.0
    set `actions` of List.Item

Design Token

Component TokenHow to use?

Token NameDescriptionTypeDefault Value
avatarMarginRightRight margin of avatarundefined | MarginRight<string | number>16
contentWidthWidth of contentstring | number220
descriptionFontSizeFont size of descriptionnumber14
emptyTextPaddingPadding of empty textundefined | Padding<string | number>16
footerBgBackground color of footerstringtransparent
headerBgBackground color of headerstringtransparent
itemPaddingPadding of itemstring12px 0
itemPaddingLGPadding of large itemstring16px 24px
itemPaddingSMPadding of small itemstring8px 16px
metaMarginBottomMargin bottom of metaundefined | MarginBottom<string | number>16
titleMarginBottomMargin bottom of titleundefined | MarginBottom<string | number>12

Global TokenHow to use?